<script setup lang="ts">
import type { MaterialProps } from '@great/designer';
import { FormSetterItem } from '@great/designer';
import { Block } from '@great/components';
import { watch } from 'vue';
import { cloneDeep } from 'lodash-es';

const formModel = reactive({
    name: 'test'
});
const list = reactive<MaterialProps[]>([
    {
        title: '名称1',
        name: 'switch-config',
        setter: {
            setterName: 'SwitchConfigSetter',
            props: {
                type: 'radio',
                switches: [
                    {
                        label: '选项A',
                        value: 'A',
                        items: [
                            {
                                title: '名称A1',
                                name: 'nameA1',
                                setter: 'StringSetter',
                                defaultValue: 'nameA1'
                            },
                            {
                                title: '名称A2',
                                name: 'nameA2',
                                setter: 'NumberSetter',
                                defaultValue: 2
                            }
                        ]
                    },
                    {
                        label: '选项B',
                        value: 'B',
                        items: [
                            {
                                title: '名称B1',
                                name: 'nameB1',
                                setter: 'BoolSetter',
                                defaultValue: true
                            },
                            {
                                title: '名称B2',
                                name: 'nameB2',
                                setter: 'ColorSetter',
                                defaultValue: '#ff0000'
                            }
                        ]
                    }
                ]
            }
        }
    },
    {
        title: '名称1',
        name: 'name1',
        setter: 'StringSetter',
        rules: [{ required: true, message: '请输入长度' }],
        defaultValue: '1'
    },
    {
        title: '日期格式化',
        name: 'dateFormat1',
        setter: 'StringSetter',
        defaultValue: 'yyyyMMdd',
        rules: [{ required: true, message: '日期格式化不能为空' }]
    },
    {
        title: '名称2',
        name: 'name2',
        setter: 'NumberSetter',
        defaultValue: 1
    },
    {
        title: '名称3',
        name: 'name3',
        setter: 'BoolSetter'
    },
    {
        title: '多设置器',
        name: 'multipleSetter',
        setter: {
            setterName: 'MultipleSetter',
            props: {
                items: [
                    {
                        setterName: 'NumberSetter',
                        typeof: {
                            type: 'JSFunction',
                            value: "( value )=>{ return !value || typeof value === 'number' }"
                        }
                    },
                    {
                        setterName: 'StringSetter',
                        defaultValue: 'default string',
                        typeof: {
                            type: 'JSFunction',
                            value: "( value )=>{  return typeof value === 'string' }"
                        }
                    }
                ]
            }
        }
    },
    {
        title: '名称4',
        name: 'name4',
        setter: {
            setterName: 'SelectSetter',
            props: {
                options: [
                    {
                        label: 'A',
                        value: 'a'
                    },
                    {
                        label: 'B',
                        value: 'b'
                    },
                    {
                        label: 'C',
                        value: 'c'
                    }
                ]
            }
        }
    },
    {
        title: '名称5',
        name: 'name5',
        setter: {
            setterName: 'RadioSetter',
            props: {
                options: [
                    {
                        label: 'A',
                        value: 'a'
                    },
                    {
                        label: 'B',
                        value: 'b'
                    },
                    {
                        label: 'C',
                        value: 'c'
                    }
                ]
            }
        }
    },
    {
        title: '名称6',
        name: 'name6',
        setter: 'ColorSetter'
    },
    {
        title: '名称7',
        name: 'name7',
        setter: 'RateSetter'
    },
    {
        title: '名称8',
        name: 'name8',
        setter: 'DatePickerSetter'
    },
    {
        title: '名称9',
        name: 'name9',
        setter: {
            setterName: 'ArraySetter',
            props: {
                itemSetter: {
                    setterName: 'StringSetter'
                },
                itemDefaultValue: 'new item'
            }
        }
    },
    {
        title: '名称10',
        name: 'name10',
        defaultValue: { 'name10-1': 'hello', 'name10-2': 'b' },
        setter: {
            setterName: 'ObjectSetter',
            props: {
                simple: true,
                items: [
                    {
                        title: '名称10-1',
                        name: 'name10-1',
                        setter: 'StringSetter'
                    },
                    {
                        title: '名称10-2',
                        name: 'name10-2',
                        setter: {
                            setterName: 'SelectSetter',
                            props: {
                                options: [
                                    {
                                        label: 'A',
                                        value: 'a'
                                    },
                                    {
                                        label: 'B',
                                        value: 'b'
                                    },
                                    {
                                        label: 'C',
                                        value: 'c'
                                    }
                                ]
                            }
                        }
                    }
                ]
            }
        }
    },
    {
        title: '名称11',
        name: 'name11',
        setter: {
            setterName: 'ObjectSetter',
            props: {
                defaultItemName: 'name11-2',
                items: [
                    {
                        title: '名称11-1',
                        name: 'name11-1',
                        setter: 'StringSetter'
                    },
                    {
                        title: '名称11-2',
                        name: 'name11-2',
                        setter: {
                            setterName: 'SelectSetter',
                            props: {
                                options: [
                                    {
                                        label: 'A',
                                        value: 'a'
                                    },
                                    {
                                        label: 'B',
                                        value: 'b'
                                    },
                                    {
                                        label: 'C',
                                        value: 'c'
                                    }
                                ]
                            }
                        }
                    },
                    {
                        title: '名称11-3',
                        name: 'name11-3',
                        setter: 'BoolSetter'
                    }
                ]
            }
        }
    },
    {
        title: '名称9',
        name: 'name91',
        setter: {
            setterName: 'ArraySetter',
            props: {
                itemDefaultValue: { 'name11-1': 'hello', 'name11-2': 'b', 'name11-3': true },
                itemSetter: {
                    setterName: 'ObjectSetter',
                    props: {
                        simple: true,
                        defaultItemName: 'name11-2',
                        items: [
                            {
                                title: '名称11-1',
                                name: 'name11-1',
                                setter: 'StringSetter'
                            },
                            {
                                title: '名称11-2',
                                name: 'name11-2',
                                setter: {
                                    setterName: 'SelectSetter',
                                    props: {
                                        options: [
                                            {
                                                label: 'A',
                                                value: 'a'
                                            },
                                            {
                                                label: 'B',
                                                value: 'b'
                                            },
                                            {
                                                label: 'C',
                                                value: 'c'
                                            }
                                        ]
                                    }
                                }
                            },
                            {
                                title: '名称11-3',
                                name: 'name11-3',
                                setter: 'BoolSetter'
                            }
                        ]
                    }
                }
            }
        }
    },
    {
        title: '显示格式化',
        name: 'dateFormat',
        setter: {
            setterName: 'ObjectSetter',
            props: {
                items: [
                    {
                        title: 'True',
                        name: 'true',
                        setter: 'StringSetter',
                        defaultValue: '是'
                    },
                    {
                        title: 'False',
                        name: 'false',
                        setter: 'StringSetter',
                        defaultValue: '否'
                    }
                ]
            }
        }
    }
]);

watch(formModel, () => {
    console.log('formModel', JSON.stringify(formModel));
});

const list1 = reactive([
    {
        title: '数据类型',
        name: 'dataType',
        setter: {
            setterName: 'SwitchConfigSetter',
            props: {
                type: 'select',
                switches: [
                    {
                        label: 'Constant字符常量',
                        value: 'Constant',
                        items: [
                            {
                                title: '枚举项',
                                name: 'options',
                                setter: {
                                    setterName: 'ArraySetter',
                                    props: {
                                        itemSetter: {
                                            setterName: 'ObjectSetter',
                                            props: {
                                                items: [
                                                    {
                                                        title: 'Label',
                                                        name: 'label',
                                                        setter: 'StringSetter'
                                                    },
                                                    {
                                                        title: 'Value',
                                                        name: 'value',
                                                        setter: 'StringSetter'
                                                    }
                                                ]
                                            }
                                        }
                                    }
                                }
                            },
                            {
                                title: '显示格式',
                                name: 'displayFormat',
                                defaultValue: 'label',
                                setter: {
                                    setterName: 'RadioSetter',
                                    props: {
                                        options: [
                                            {
                                                label: '显示文本',
                                                value: 'label'
                                            },
                                            {
                                                label: '显示值',
                                                value: 'value'
                                            }
                                        ]
                                    }
                                }
                            }
                        ]
                    },
                    {
                        label: 'Spi调用',
                        value: 'Spi',
                        items: [
                            {
                                title: 'Spi实现类',
                                name: 'className',
                                setter: {
                                    setterName: 'AsyncDataSelectSetter',
                                    props: {
                                        api: ''
                                    }
                                }
                            }
                        ]
                    },
                    {
                        label: 'Script脚本调用',
                        value: 'script',
                        items: [
                            {
                                title: 'Script脚本',
                                name: 'scriptName',
                                setter: {
                                    setterName: 'AsyncDataSelectSetter',
                                    props: {
                                        api: ''
                                    }
                                }
                            }
                        ]
                    },
                    {
                        label: '数据字典',
                        value: 'Dictionary',
                        items: [
                            {
                                title: '数据字典',
                                name: 'dictName',
                                setter: {
                                    setterName: 'AsyncDataSelectSetter',
                                    props: {
                                        api: ''
                                    }
                                }
                            }
                        ]
                    },
                    {
                        label: '标签',
                        value: 'Tag',
                        items: [
                            {
                                title: '标签分类',
                                name: 'tabName',
                                setter: {
                                    setterName: 'AsyncDataSelectSetter',
                                    props: {
                                        api: ''
                                    }
                                }
                            }
                        ]
                    },
                    {
                        label: '组织机构',
                        value: 'Organization',
                        items: [
                            {
                                title: '组织机构',
                                name: 'organizationName',
                                setter: {
                                    setterName: 'AsyncDataSelectSetter',
                                    props: {
                                        api: ''
                                    }
                                }
                            }
                        ]
                    }
                ]
            }
        },
        defaultValue: { value: 'Constant' }
    }
]);
</script>

<template>
    <Block>
        <ElForm :model="formModel">
            <FormSetterItem
                v-for="item in list1"
                :key="item.name"
                :item="item"
                v-model="formModel[item.name]"
                @update:model-value="console.log"
                :label-width="120"
            />
        </ElForm>
    </Block>
</template>

<style scoped lang="scss"></style>
